<template>
  <div>

    <div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">到货管理</a></el-breadcrumb-item>
        <el-breadcrumb-item>到货回执管理</el-breadcrumb-item>
        <el-breadcrumb-item>客户回执</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--form表单搜索框-->
    <!-- 搜索筛选 -->
    <div>

      <el-form :inline="true"  class="driverReceipt-search" style="text-align: left">
        <el-form-item >
          <el-input size="small"  placeholder="客户姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input size="small"  placeholder="客户手机号"></el-input>
          <template slot="prepend">客户手机号:</template>
        </el-form-item>
        <el-form-item>
          <el-input size="small"  placeholder="货运单编号"></el-input>
          <template slot="prepend">货运单编号:</template>
        </el-form-item>

        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div>
      <!--功能按钮-->
      <el-row :inline="true" style="text-align: left" >
        <el-button type="success" @click="addDriverReceiptFormVisible = true">增加</el-button>
        <!--        <el-button type="primary">短信通知发货客户</el-button>-->
      </el-row>
    </div>

    <!--增加客户回执单弹出框-->
    <div>
      <el-dialog title="增加客户回执单" :visible.sync="addDriverReceiptFormVisible">
        <el-form :model="adddriverreceiptform" ref="adddriverreceiptform" :rules="rules" :inline="true" label-width="80px">
          <el-form-item label="货运单编号" :label-width="formLabelWidth" prop="fid">
            <el-input v-model="adddriverreceiptform.fid" autocomplete="off" @blur="panduanIsOK()"></el-input>
          </el-form-item>

          <el-form-item label="收货人姓名" :label-width="formLabelWidth" prop="name">
            <el-input v-model="adddriverreceiptform.name" autocomplete="off" ></el-input>
          </el-form-item>

          <el-form-item label="是否通过验收" label-width="120px" prop="ispass">
            <el-radio-group v-model="adddriverreceiptform.ispass">
              <el-radio :label=true>是</el-radio>
              <el-radio :label=false>否</el-radio>
            </el-radio-group>
          </el-form-item>



          <el-form-item label="客户验收时间" label-width="120px" prop="accept_time">
            <el-date-picker
                v-model="adddriverreceiptform.accepttime"
                type="datetime"
                placeholder="选择日期时间"
                align="right"
                :picker-options="pickerOptions">
            </el-date-picker>


          </el-form-item>

          <el-form-item>
            <el-button @click="addDriverReceiptFormVisible = false;resetForm('adddriverreceiptform')">取 消</el-button>
            <el-button type="primary" @click="addDriverReceipt('adddriverreceiptform')">确 定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>



    <!--客户回执回执列表-->
    <el-table :data="pageInfo.list" style="width: 100%">
      <!--      <el-table-column type="selection" width="55"></el-table-column>-->
      <el-table-column prop="caid" label="客户回执单号" width="180"></el-table-column>
      <el-table-column fixed prop="fid" label="货运单号" width="180"></el-table-column>
      <el-table-column prop="cid" label="运输单号" width="180"></el-table-column>
      <el-table-column prop="ispass" label="验收结果" width="180">
        <template slot-scope="scope">
          {{scope.row.ispass?"通过":"未通过"}}
        </template>
      </el-table-column>
      <el-table-column prop="accepttime" label="验收时间" width="180"></el-table-column>
      <el-table-column prop="name" label="收货人姓名" width="180"></el-table-column>
      <el-table-column label="操作"  width="200">
        <template slot-scope="scope" fixed="right" width="200">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--修改客户回执单弹出框-->
    <div>
      <el-dialog title="修改客户回执单" :visible.sync="updateDriverReceiptFormVisible">
        <el-form :model="updatedriverreceiptform" :inline="true" label-width="80px">


          <el-form-item label="收货人姓名" :label-width="formLabelWidth">
            <el-input v-model="updatedriverreceiptform.name" autocomplete="off" ></el-input>
          </el-form-item>

          <el-form-item label="是否通过验收" label-width="120px">
            <el-radio-group v-model="updatedriverreceiptform.ispass">
              <el-radio :label=true>是</el-radio>
              <el-radio :label=false>否</el-radio>
            </el-radio-group>
          </el-form-item>



          <el-form-item label="客户验收时间" label-width="120px">
            <el-date-picker
                v-model="updatedriverreceiptform.accepttime"
                type="datetime"
                placeholder="选择日期时间"
                align="right"
                :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" >
          <el-button @click="updateDriverReceiptFormVisible = false;updateDriverReceiptForm={}">取 消</el-button>
          <el-button type="primary" @click="updateDriverReceipt()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!--      分页-->
    <div class="block">
      <el-pagination style="margin-left: 280px"
                     @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="pageInfo.pageNum" :page-sizes="[5, 10]" :page-size="pageInfo.pageSize"
                     layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total"></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "Customer_receipt",
  methods: {
    //格式化时间
    timeTrans(time) {
      let date = new Date(new Date(time).getTime() + 8 * 3600 * 1000)
      date = date.toJSON();


      date = date.substring(0, 19).replace('T', ' ')

      return date;
    },
    /*表格的修改和删除方法*/
    handleEdit(index, row) {
      console.log(index, row);
      this.updateDriverReceiptFormVisible=true;
      this.updatedriverreceiptform={...row}
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm('确定要删除该条客户验收记录?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        //发送axios
        this.axios.delete("http://localhost:8080/customer/" + row.caid).then(res =>{
          if(res.data.code == 20001){
            this.getList();
            this.$message({
              type: 'success',
              message: res.data.msg
            });
          }else {
            this.$message({
              type: 'error',
              message: '删除失败!'
            });
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    /*分页的两个方法*/
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize=val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage=val;
      this.getList();
    },
    getList(){
      this.axios.get("http://localhost:8080/customer/" + this.currentPage + "/" + this.pageSize).then(res => {
        console.log(res.data.data.list);
        this.pageInfo = res.data.data;

      })
    },
    //增加客户回执单的方法
    addDriverReceipt(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.adddriverreceiptform.accepttime = new Date().format("yyyy-MM-dd hh:mm:ss");
          //发送axios
          this.axios.post("http://localhost:8080/customer",this.adddriverreceiptform).then(res =>{
            this.$message(res.data.msg);
            this.adddriverreceiptform={};
            this.addDriverReceiptFormVisible=false;
            this.getList();


          })
        } else {
          this.$message("请填完必填选项！");
          return false;
        }
      });

    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //根据fid判断是否可以增加回执单
    panduanIsOK(){
      this.axios.get("http://localhost:8080/customer/panduanIsOK/" + this.adddriverreceiptform.fid).then(res =>{
        this.$message(res.data.msg);
        if (res.data.code == 50001){
          this.adddriverreceiptform.fid='';
        }


      })
    },
    updateDriverReceipt(){
      this.axios.put("http://localhost:8080/customer",this.updatedriverreceiptform).then(res=>{
        this.$message(res.data.msg);
        this.updatedriverreceiptform={};
        this.updateDriverReceiptFormVisible=false;
        this.getList();
      })
    }
  },
  created() {
    //发送axios
    this.getList();
  },
  data() {
    return {
      rules: {
        fid: [
          { required: true, message: '这是必填选项', trigger: 'blur' },

        ],

        accept_time: [
          { type: 'date', required: false, message: '请选择日期', trigger: 'change' }
        ],


        ispass: [
          { required: true, message: '请选择是否通过验收', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请填写你的姓名', trigger: 'blur' }
        ],

      },
      activeName: 'first',
      //新增弹出框参数
      addDriverReceiptFormVisible:false,
      adddriverreceiptform: {
        caid: '',
        ispass:'',
        cid:'',
        fid:'',
        accepttime:'',
        name:''
      },
      //新增弹出框参数
      updateDriverReceiptFormVisible:false,
      updatedriverreceiptform: {
        caid: '',
        ispass:'',
        cid:'',
        fid:'',
        accepttime:'',
        name:''
      },
      formLabelWidth: '100px',
      //客户验收单数据
      //当前页码
      currentPage:1,
      //每页显示的条数
      pageSize:2,
      //分页插件返回的json对象
      pageInfo:{},
      search: '',
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      input1:'',
      //日期时间选择器
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      value1: '',
      value2: '',


    };
  },



}
</script>

<style scoped>

</style>